<template>
  <div>
    <n-layout class="content">
      <n-flex justify="end">
        <n-button class="text_size" type="info" :loading="loading" @click="fetchList">刷新数据</n-button>
      </n-flex>

      <n-data-table :columns="columns" :data="DataList" />
    </n-layout>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, h, onMounted } from "vue";
import { NTag, NButton, NFlex, NDataTable, NLayout } from "naive-ui";
import { API_URLS } from '../../utils/apiConfig';

const List_API_URL = API_URLS.tasks.allStatus;
const Start_API_URL = API_URLS.tasks.start;
const Stop_API_URL = API_URLS.tasks.stop;
const ReStart_API_URL = API_URLS.tasks.restart;

const DataList = ref([]);
const loading = ref(false);
const error = ref(null);

const columns = [
  { title: "进程名称", key: "task_name" },
  { title: "进程状态", key: "status" },
  { title: "异常信息", key: "error" },
  {
    title: "运行状态",
    key: "is_running",
    render: (row) => {
      const isRunning = row.is_running;
      const color = isRunning ? "green" : "red";
      const text = isRunning ? "运行中" : "已停止";

      // 创建圆形指示器
      const circle = h("span", {
        style: {
          width: "20px",
          height: "20px",
          borderRadius: "50%",
          backgroundColor: color,
          display: "inline-block",
          marginRight: "6px",
        },
      });

      // 创建文本元素
      const textNode = h("span", text);

      // 组合成一个容器元素
      return h(
        "div",
        {
          style: {
            display: "flex",
            alignItems: "center",
            justifyContent: "flex-start",
          },
        },
        [circle, textNode]
      );
    },
  },
  { title: "结果", key: "result" },
  { title: "描述", key: "description" },
  {
    title: "启动",
    key: "start",
    render(row) {
      return h(
        NButton,
        {
          strong: true,
          secondary: true,
          size: "small",
          type: "success",
          onClick: () => start_row(row.task_name),
        },
        { default: () => "启动" }
      );
    },
  },
  {
    title: "停止",
    key: "stop",
    render(row) {
      return h(
        NButton,
        {
          strong: true,
          secondary: true,
          size: "small",
          type: "error",
          onClick: () => stop_row(row.task_name),
        },
        { default: () => "停止" }
      );
    },
  },
  {
    title: "重启",
    key: "restart",
    render(row) {
      return h(
        NButton,
        {
          strong: true,
          secondary: true,
          size: "small",
          type: "warning",
          onClick: () => restart_row(row.task_name),
        },
        { default: () => "重启" }
      );
    },
  },
];

async function start_row(task_name) {
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.post(
      Start_API_URL,
      { task_name: task_name },
      {
        params: {
          task_name: task_name,
        },
      }
    );

    if (response.data.code === 200) {
      console.log(response.data.msg);
    } else {
      error.value = `获取数据失败: ${response.data.msg || "未知错误"}`;
    }
  } catch (err) {
    error.value = `网络错误: 无法连接到服务器 (${err.message})`;
  } finally {
    loading.value = false;
    if (error.value != null) {
      message.error(error.value);
    }
    //重新加载数据
    fetchList();
  }
}

async function stop_row(task_name) {
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.post(
      Stop_API_URL,
      { task_name: task_name },
      {
        params: {
          task_name: task_name,
        },
      }
    );
    if (response.data.code === 200) {
      console.log(response.data.msg);
    } else {
      error.value = `获取数据失败: ${response.data.msg || "未知错误"}`;
    }
  } catch (err) {
    error.value = `网络错误: 无法连接到服务器 (${err.message})`;
  } finally {
    loading.value = false;
    if (error.value != null) {
      message.error(error.value);
    }
    //重新加载数据
    fetchList();
  }
}

async function restart_row(task_name) {
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.post(
      ReStart_API_URL,
      { task_name: task_name },
      {
        params: {
          task_name: task_name,
        },
      }
    );

    if (response.data.code === 200) {
      console.log(response.data.msg);
    } else {
      error.value = `获取数据失败: ${response.data.msg || "未知错误"}`;
    }
  } catch (err) {
    error.value = `网络错误: 无法连接到服务器 (${err.message})`;
  } finally {
    loading.value = false;
    if (error.value != null) {
      message.error(error.value);
    }
    //重新加载数据
    fetchList();
  }
}

// 获取列表数据
const fetchList = async () => {
  loading.value = true;
  error.value = null;

  try {
    const response = await axios.get(List_API_URL);
    console.log(response);

    if (response.data.code === 200) {
      DataList.value = response.data.data;
      console.log(DataList.value);
    } else {
      error.value = `获取数据失败: ${response.data.msg || "未知错误"}`;
    }
  } catch (err) {
    error.value = `网络错误: 无法连接到服务器 (${err.message})`;
  } finally {
    loading.value = false;
    if (error.value != null) {
      message.error(error.value);
    }
  }
};

// 初始化页面
onMounted(() => {
  fetchList();
});
</script>
